<template>
    <a-card>
        <!-- 操作按钮 -->
        <template>
            <a-button icon="plus" type="primary" @click="updateFormStatus(1)" class="btn_margin">新增</a-button>
            <a-button icon="edit" type="primary" @click="updateFormStatus(2)" :disabled="!selectedData" class="btn_margin">修改</a-button>
            <a-button icon="delete" type="danger" @click="deleteSelectedData" :disabled="!selectedData" class="btn_margin">删除</a-button>
        </template>

        <div style="overflow: hidden;padding-top: 10px;">
            <!-- 菜单树 -->
            <a-tree :tree-data="dataSource" default-expand-all autoExpandParent @select="clickTreeNode" style="float: left;"  />
            <!-- 表单 -->
            <a-card style="float: right;min-width: 500px;" :body-style="{ padding : '30px 20px 0 15px' }">
                <a-form :form="editForm" @submit="onFormSubmit">
                    <a-form-item style="display: none;">
                        <a-input type="text" disabled v-decorator="[ 'id' ]" />
                    </a-form-item>
                    <a-form-item label="名称" required :label-col="{ span : 3 }" :wrapper-col="{ span : 21 }">
                        <a-input type="text" autocomplete="off" :disabled="isWrite"
                             v-decorator="[
                                'name',
                                { rules: [{ required: true, message: '菜单名称不能为空' }] }
                             ]"
                        />
                    </a-form-item>
                    <a-form-item label="父节点" :label-col="{ span : 3 }" :wrapper-col="{ span : 21 }">
                        <a-input type="text" placeholder="默认,根节点" disabled autocomplete="off" v-decorator="[ 'pid' ]" />
                    </a-form-item>
                    <a-form-item label="类型" required :label-col="{ span : 3 }" :wrapper-col="{ span : 21 }">
                        <a-radio-group :disabled="isWrite" v-decorator="[ 'type' ]">
                            <a-radio :value="1">菜单</a-radio>
                            <a-radio :value="2">按钮</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="标识" required :label-col="{ span : 3 }" :wrapper-col="{ span : 21 }">
                        <a-input type="text" placeholder="唯一标识" autocomplete="off" :disabled="isWrite"
                             v-decorator="[
                                'permission',
                                { rules: [{ required: true, message: '唯一标识不能为空' }] }
                             ]"
                        />
                    </a-form-item>
                    <a-form-item label="图标" :label-col="{ span : 3 }" :wrapper-col="{ span : 21 }">
                        <a-input type="text" placeholder="图标" autocomplete="off" :disabled="isWrite" v-decorator="[ 'icon' ]" />
                    </a-form-item>
                    <a-form-item label="路径" :label-col="{ span : 3 }" :wrapper-col="{ span : 21 }">
                        <a-input type="text" autocomplete="off" :disabled="isWrite" v-decorator="[ 'path' ]" />
                    </a-form-item>
                    <a-form-item label="排序" :label-col="{ span : 3 }" :wrapper-col="{ span : 21 }">
                        <a-input type="text" placeholder="排序值,用于调整前后顺序" autocomplete="off" :disabled="isWrite" v-decorator="[ 'sort' ]" />
                    </a-form-item>
                    <!-- 新增或修改时显示 -->
                    <a-form-item v-if="!isWrite" :wrapper-col="{ offset: 3, span : 21 }">
                        <a-button type="primary" class="btn_margin" html-type="submit">保存</a-button>
                        <a-button type="default" @click="updateFormStatus(0)" class="btn_margin">取消</a-button>
                    </a-form-item>
                </a-form>
            </a-card>
        </div>
    </a-card>
</template>

<script>
    import { getSysMenuTree,getSysMenu,addSysMenu,editSysMenu,deleteSysMenu } from '../../apis/upms';
    export default {
        data(){
            return {
                //  树形数据源
                dataSource : [],
                //  表单
                editForm : this.$form.createForm(this),
                //  控制表单是否可写
                isWrite : true,
                //  表单临时数据
                fromTempData : {},
                //  选中的数据
                selectedData : undefined,
                api : undefined,
            };
        },
        created(){
            let $this = this;
            //  初始化树形菜单
            getSysMenuTree().then(result => this.dataSource = $this.formatData(result.data));
        },
        methods : {
            /**
             * 监听表单提交
             * @param e
             */
            onFormSubmit : function (e) {
                e.preventDefault();
                let $this = this;
                this.editForm.validateFields((err, params) => {
                    if (!err) {
                        $this.api(params).then(() => {
                            $this.$router.go(0);
                            $this.$message.success("保存成功").then();
                        });
                    }
                });
            },
            clickTreeNode : function(selectedKeys,event){
                this.editForm.resetFields();
                //  判断是否选中
                if (event.selected){
                    let $this = this;
                    if (!selectedKeys[0]) {
                        $this.$modal.error({ content : '请联系管理员为当前账号设置权限' });
                    }
                    getSysMenu(selectedKeys[0]).then(result => {
                        let data = result.data;
                        if (!data){
                            $this.$modal.error({ content : '菜单Id不存在' });
                            return;
                        }
                        $this.selectedData = {
                            id : data.id,
                            name : data.name,
                            pid : data.pid,
                            type : data.type,
                            permission : data.permission,
                            icon : data.icon,
                            path : data.path,
                            sort : data.sort,
                        };
                        $this.editForm.setFieldsValue($this.selectedData);
                    });
                } else {
                    this.selectedData = undefined;
                }
                this.isWrite = true;
            },
            /**
             * 删除选中的数据
             * @param e
             */
            deleteSelectedData : function(e){
                e.preventDefault();
                let $this = this;
                deleteSysMenu($this.selectedData['id']).then(() => {
                    $this.removeData($this.dataSource,$this.selectedData);
                    $this.editForm.resetFields();
                    $this.fromTempData = {};
                    $this.selectedData = undefined;
                });
            },
            /**
             * 修改表单状态
             * @param event
             */
            updateFormStatus : function(event){
                //  判断事件是否为取消
                if (event === 0){
                    this.editForm.setFieldsValue(this.fromTempData);
                    this.isWrite = true;
                    return;
                }
                //  判断表单状态是否为可写
                if (!this.isWrite){
                    return;
                }
                this.fromTempData = this.editForm.getFieldsValue();
                //  判断事件是否为新增
                if (event === 1){
                    let pid = this.fromTempData.id === undefined ?  this.fromTempData.pid : this.fromTempData.id;
                    //  清空表单数据
                    this.editForm.resetFields();
                    //  重新初始化数据
                    this.editForm.setFieldsValue({ pid : pid });
                    this.api = addSysMenu;
                } else {
                    this.api = editSysMenu;
                }
                this.isWrite = false;
            },
            /**
             * 格式化树形菜单数据
             * @param list
             * @returns {Array}
             */
            formatData : function (list) {
                let result = [];
                list.forEach(item => {
                    let data = { key : item.id,title : item.name };
                    let children = item.children;
                    if (children && children instanceof Array){
                        data.children = this.formatData(children);
                    }
                    result.push(data);
                });
                return result;
            },
            removeData : function (list,data) {
                if (!list){
                    return;
                }
                for(let i = 0; i < list.length; i++){
                    let item = list[i];
                    if (item.key === data['id']){
                        list.splice(i,1);
                        return;
                    } else {
                        this.removeData(item.children,data);
                    }
                }

            }
        },
    }
</script>
<style scoped>
    .btn_margin{
        margin-right: 10px;
    }
</style>
